<template>
  <div class="bigbox">
    <div class="title">
      <a-icon type="home" style="margin-right:5px" />
      <router-link to="/" tag="span" class="titleLeft">首页</router-link>
      <span>/</span>
      <span>视频详情</span>
    </div>
    <div class="content">
      <div class="ant-col-8">
        <img :src="obj.bannerFileUrl" v-if="obj"/>
      </div>

      <div class="ant-col-14">
          <ul v-if="obj">
              <li class="contentTitle">{{obj.courseTitle}}</li>
              <li class="contentScore">累计{{obj.participationsCount}}人学习<a-rate v-model="value" style="margin-left: 10px" /></li>
              <li v-if="Number(isfree)">免费</li>
              <li v-if="!Number(isfree)" class="contentPrice"><span style="color: black;font-size: 21px;padding-right: 9px;">￥{{obj.discountPrice}}</span><del style="color: red">￥{{obj.coursePrice}}</del></li>
              <li v-if="!Number(isfree)"><span class="ant-tag ant-tag-orange" style="border-radius: 2px;">限时钜惠</span></li>
              <li>
                  <button class="ant-btn ant-btn-primary button" style="background-color: #FF8000">立即购买</button>
                  <button class="ant-btn ant-btn-primary button" style="background-color: #00CF8C">加入购物车</button>
              </li>
          </ul>
      </div>
    </div>

  </div>
</template>

<script>
export default {
    data(){
return{
    obj:null,
    value: 5,
    isfree:0
}
    },
    created(){
        
        this.$axios.get(`http://59.111.104.104:8086/pc/course/detail/${this.courseId}`).then(res=>{
            this.obj=res.data.data
            this.isfree=this.obj.isFree
        });
    },
    props:{
        courseId:{
            type:Number,
            default:121
        }
    }
};
</script>

<style lang='less' scoped>
.bigbox {
  text-align: left;
  font-size: 15px;
  color: #868686;
  .title {
    height: 40px;
    line-height: 40px;
    span {
      margin-right: 5px;
    }
  }
  .content {
    width: 100%;
    height: 260px;
    background-color: #fff;
    padding: 20px;
    .ant-col-8{
        img{
            width: 330px;
    height: 220px;
        }
    }
    /deep/ul{
        list-style: none;
        padding-inline-start:0px;
    }
     }
    .contentTitle{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 36px;
        font-size: 24px;
        color: #000;
    }
    .contentScore{
        font-size: 14px;
        padding: 10px 0px;
    }
    .button{
        border-radius: 2px;
        width: 160px;
        height: 45px;
        margin-right: 10px;
        margin-top: 10px;
        font-size: 18px;
        border: none;
    }
    .contentPrice{
        margin-bottom: 10px;
    }
}

</style>